<!--
 * @Author: your name
 * @Date: 2019-12-20 13:11:23
 * @LastEditTime : 2019-12-20 15:57:35
 * @LastEditors  : Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /courseware_echarts/07/bar.html
 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="main" style="width: 700px;height: 860px;"></div>
    <script src="../echarts.min.js"></script>
    <script>
        var myChart = echarts.init(document.querySelector('#main'))
        let category = [{
                name: "管控",
                value: 2500
            },
            {
                name: "集中式",
                value: 8000
            },
            {
                name: "纳管",
                value: 3000
            }
        ]; //类别


        let option = {
            backgroundColor: '#fff',
            yAxis: {
                // max: total,

            },
            xAxis: [{
                data: category,
            }],
            series: [{
                    //内
                    type: "bar",
                    barWidth: 30,
                    legendHoverLink: false,
                    silent: true,
                    itemStyle: {

                        color: function (params) {
                            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                offset: 0,
                                color: '#E83F94'
                            }, {
                                offset: 1,
                                color: '#F54E5E'
                            }], false)
                        }
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "left",
                            formatter: "{b}",
                            textStyle: {
                                color: "#fff",
                                fontSize: 14
                            }
                        }
                    },
                    data: category,
                    z: 1,
                    animationEasing: "elasticOut"
                },
                {
                    //分隔
                    type: "pictorialBar",
                    itemStyle: {
                        color: "#fff"
                    },
                    symbolRepeat: "fixed",
                    symbolMargin: 2,
                    symbol: "rect",
                    symbolClip: false,
                    symbolSize: [33, 10],
                    symbolPosition: "start",
                    symbolMargin: '5',
                    symbolBoundingData: this.total,
                    data: category,
                    z: 2,
                    animationEasing: "elasticOut"
                }


            ]
        };
        myChart.setOption(option);
    </script>
</body>

</html>